<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/jsp/common/taglib.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
	<meta http-equiv="pragma" content="no-cache" />
	<meta http-equiv="cache-control" content="no-cache" />
	<meta http-equiv="expires" content="0"/>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>MCU MANAGER</title>
	<%@ include file="/WEB-INF/jsp/common/cssjs2.jsp" %>
	
	<script type="text/javascript">
		$(function(){
			$('.easyui-validatebox').validatebox();
			$('.easyui-validatebox[required]').after("<font color='red'> *</font>");
			
			loadGroup();
			
			$("#id_accesslevel").val("${admin.accesslevel}");
			
			if("${admin.accesslevel}"=="Conference"){
				$("#id_grouplimit").removeAttr("disabled");
				
				if("${admin.grouplimit}"=="true"){
					$("#id_grouplimit").attr("checked",true);
					$("#id_group").removeAttr("disabled");
				}
			}
			
			//enabled grouplimit checkbox when access level is conference,disabled else.
			$("#id_accesslevel").change(function(){
				var val=this.value;
				if(val=='Conference'){
					$("#id_grouplimit").removeAttr("disabled");
				}else{
					$("#id_h_grouplimit").val("false");
					$("#id_h_group").val("");
					
					$("#id_grouplimit").attr("checked",false);
					$("#id_grouplimit").attr("disabled","disabled");
					$("#id_group").val("");
					$("#id_group").attr("disabled","disabled");
					$("#id_group").removeAttr("required");
					$("#id_group").next().remove();
					$("#id_group").attr("class","input-text");
				}
			});
			$("#id_grouplimit").change(function(){
				var checked=this.checked;
				if(checked){
					$("#id_h_grouplimit").val("true");
					
					$("#id_group").removeAttr("disabled");
					$("#id_group").after("<font color='red'> *</font>");
					$("#id_group").attr("required","true");
					$("#id_group").validatebox();
				}else{
					$("#id_h_grouplimit").val("false");
					$("#id_h_group").val("");
					
					$("#id_group").val("");
					$("#id_group").attr("disabled","disabled");
					$("#id_group").removeAttr("required");
					$("#id_group").next().remove();
					$("#id_group").attr("class","input-text");
				}
			});
			$("#id_group").change(function(){
				$("#id_h_group").val($(this).val());
			});
		});
		
		function doSubmit(){
			$('#id_form').form('submit', {
		        url:"<c:url value='/app/manage/admin'/>",
		        onSubmit: function(){
		        	if(isAdminNameExist()){
		        		alert(messages.getMsg("admin.error.nameExist",[$("#id_name").val()]));
		        		return false;
		        	}else if($('.easyui-validatebox,#id_group:enabled').validatebox("isValid")==false){
		        		return false;
		        	}else{
						return true;
					}
		        },
		        success:function(data){					
					if("<fmt:message key="operation.success"/>" != data)
						alert(data);
					parent.adminViewObj.reload();
					parent.closeWin();
		        }
			});
		}
		
		// Check whether the same name uesr already existed on the server
		function isAdminNameExist(){
			var ret=false;
			var _name=$("#id_name").val();
			var _preName="<c:out value='${admin.name}'/>";
			
			if("${param.opt}"=="modify"&&_name==_preName){//whether the same name in the modify page
				ret=false;
			}else{
				$.ajax({
					url:"<c:url value='/app/manage/admin/check'/>",
					async:false,
					type:"GET",
					data:{
						name:_name,
						times:new Date().toString()
					},
					success:function(data){
						if(data=="true")
							ret=true;
					}
				});
			}
			
			return ret;
		}
		
		function loadGroup(){
			$.ajax({
				url:"<c:url value='/app/manage/group/combox'/>",
				type:"GET",
				data:{
					times:new Date().valueOf()
				},
				success:function(data){
					var groups=eval(data);
					$.each(groups,function(){
						$("#id_group").append("<option value='"+this.name+"'>"+this.name+"</option>");
					});
					
					setTimeout(function(){
						$("#id_group").val("${admin.group}");
					},100);
				}
			});
		}
	</script>
	
	<style type="text/css">
	    html, body {
	        width: 100%;
	        height: 100%;
	        margin: 0px;
	        overflow: hidden;
	    }
	</style>
</head>
<body class="dialog">
	<div id="id_admin" class="table-container">
		<div style="height:20px;"></div>
		<form id="id_form" method="post">
		<c:if test="${param.opt=='modify'}">
			<input type="hidden" value="PUT" name="_method"/>
		</c:if>
		<table>
			<tr>
				<td><fmt:message key='form.admin.name'/></td>
				<td>
				<input id="id_name" <c:if test="${param.opt=='modify'}">readonly="readonly" style="background-color: #DEDBD6;"</c:if> type="text" name="name" required="true" value="${admin.name}" validType="nodelimiter" class="input-text easyui-validatebox">
				</td>
			</tr>
			<tr>
				<td><fmt:message key='form.admin.realname'/></td>
				<td><input type="text" name="realname" value="${admin.realname}" class="input-text easyui-validatebox"/></td>
			</tr>
			<tr>
				<td><fmt:message key='form.admin.password'/></td>
				<td><input type="password" name="password" value="${admin.password}" class="input-text easyui-validatebox" required="true"/></td>
			</tr>
			<tr>
				<td><fmt:message key='form.admin.phone'/></td>
				<td><input type="text" name="phone" value="${admin.phone}" validType="digit" class="input-text easyui-validatebox"/></td>
			</tr>
			<tr>
				<td><fmt:message key='form.admin.email'/></td>
				<td><input type="text" name="email" value="${admin.email}" validType="email" class="input-text easyui-validatebox"/></td>
			</tr>
			<tr>
				<td><fmt:message key='form.admin.address'/></td>
				<td><input type="text" name="address" value="${admin.address}" class="input-text easyui-validatebox"/></td>
			</tr>
			<c:if test="${param.opt!='modify'||admin.name!='root'||sessionScope.loginInfo.username!='root'}">
			<tr>
				<td><fmt:message key='form.admin.accesslevel'/></td>
				<td>
					<select name="accesslevel" id="id_accesslevel" class="input-text easyui-validatebox" required="true">
						<option value=""></option>
						<option value="System">System</option>
						<option value="Conference">Conference</option>
					</select>
				</td>
			</tr>
			<tr>
				<td><fmt:message key='form.admin.grouplimit'/></td>
				<td>
					<input type="checkbox" disabled="disabled" id="id_grouplimit"/>
					<input type="hidden" value="false" id="id_h_grouplimit" name="grouplimit"/>
				</td>
			</tr>
			<tr>
				<td><fmt:message key='form.admin.group'/></td>
				<td>
					<input type="hidden" id="id_h_group" value="${admin.group}" name="group"/>
					<select id="id_group" class="input-text" disabled="disabled">
						<option value=""></option>
					</select>
					<!-- Please don't add any element after this select as javascript will remove the element behind it sometimes -->
				</td>
			</tr>
			</c:if>
			<tr>
				<td colspan="2">
					<p align="center">
						<input type="button" onclick="doSubmit();" class="mybtn" value="<fmt:message key='btn.ok'/>">
						<button onclick="parent.closeWin();" class="mybtn"><fmt:message key='btn.cancel'/></button>
					</p>
				</td>
			</tr>
		</table>
		</form>
		<div style="height:20px;"></div>
	</div>
</body>
</html>